<!--模板 html-->
<template>
    <div>
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>     
        </div>
        <div class="tab_content">
            <el-table :data="messages" style="width: 100%">
                <el-table-column prop="id" label="序号" > </el-table-column>
                <el-table-column prop="question" label="问题" > </el-table-column>
                <el-table-column prop="questionTime" label="问题时间">
                    <template slot-scope="scope">
                    {{scope.row.questionTime | fmtTime}}
                    </template>  
	            </el-table-column>
                <el-table-column prop="replay" label="回复"> </el-table-column>
                <el-table-column prop="replayTime" label="回复时间">
                    <template slot-scope="scope">
                    {{scope.row.replayTime | fmtTime}}
                    </template>  
	            </el-table-column>
                <el-table-column prop="status" label="状态"> </el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                    <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                </template>
                </el-table-column>
             </el-table>
        </div>
    </div>
</template>
<!--脚本 js-->
<script>
import {del, get } from '@/utils/request'
export default {
    // 定义变量，在模板中直接用用
   data(){
       return {
           messages:[],
           visible:false
       }
   },
    // 定义事件处理函数、方法
    methods:{
        deleteHandler(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                    let url = "http://localhost:8888/message/deleteById"
                    del(url,{id:row.id}).then(resp =>{
                    // 1. 提示
                    this.$message({type:"success",message:resp.message});
                    // 2. 刷新
                    this.loadMessages();
                    })
            })
        },

        editHandler(row){
            this.$router.push({
                    path:"/message/list_form",
                    query: row
                }
            )
        },

        toFormHandler(){
            this.$router.push(
                {
                    path:"/message/list_form"
                }

            )
        },

        // 查询所有的信息数据
        loadMessages(){
            let url="http://localhost:8888/message/query"
            get(url).then(resp => {
                // 获取数据之后做的事情
                //控制台打印数据
                console.log(resp.data)
                //将从接口获取到的data存放到messages中
                this.messages = resp.data

            })
        }
    },
    // 生命周期钩子函数
    created(){
        this.loadMessages();
    }


}
</script>

<!--样式 css-->
<style lang="sass" scoped>

</style>




